<template>
    <video @click="videoAmplify()" preload="metadata" class="videos">
        <source :src="src + '#t=0.05'" type="video/mp4">
        <source :src="src + '#t=0.05'" type="video/wmv">
        <source :src="src + '#t=0.05'" type="video/flv">
    </video>
    <div class="videoDisplay" v-if="isShow">
        <van-icon name="cross" @click="handleLeft" color="#fff" />
        <video class="videoDisplay_video" controls autoplay>
            <source :src="src" type="video/mp4">
            <source :src="src" type="video/wmv">
            <source :src="src" type="video/flv">
        </video>
    </div>
</template>

<script setup lang="ts">
import { ref, defineProps } from 'vue'

defineProps({
    src: { type: String, default: '' },
})

const isShow = ref(false)

const videoAmplify = () => {
    isShow.value = true
}

const handleLeft = () => {
    isShow.value = false
}
</script>

<style lang="less" scoped>
.videos {
    width: 90px;
    height: 90px;
}

.videoDisplay {
    width: 100%;
    height: 100vh;
    background: #000;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    flex-flow: column;
    z-index: 9999;

    box-sizing: border-box;

    .van-icon {
        top: 50px !important;
        right: 0 !important;
        text-align: right !important;
        margin-right: 20px !important;
        z-index: 6006 !important;
        width: auto !important;
        height: auto !important;
        background: none !important;
        font-size: 15px !important;
    }

    :deep(.van-hairline--bottom:after) {
        border: none;
    }

    :deep(.van-nav-bar) {
        background: #000;
    }

    :deep(.van-icon-arrow-left) {
        color: #fff !important;
    }

    :deep(.van-nav-bar__content) {
        background: #000;
        position: fixed;
        top: 50px;
    }

    .videoDisplay_video {
        flex: 1;
        min-height: 0;
    }
}
</style>